<template>
    <el-card style="max-width: 100%">
        <template #header>
        <div class="card-header">
            <span>产品分类</span>
            <el-button 
                size="small" 
                type="primary" 
                @click="categoryAdd" 
                style="margin-left: 20px;"
                >
                添加分类
            </el-button>
        </div>
        </template>
        <el-table v-loading="loading" :data="category" style="width: 80%">
            <el-table-column prop="title" label="标题" />
            <el-table-column prop="introduce" label="简介" />
            <el-table-column prop="uptime_format" label="更新时间" />
            
            <el-table-column label="操作">
                <template #default="scope">
                <el-button size="small" type="primary"  @click="handleEdit(scope.$index, scope.row)">
                编辑
                </el-button>
                <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.row.id)"
                >
                删除
                </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <!-- 更新数据 -->
    <el-dialog v-model="dialogVisibleUpdate" :title="dialogTitle" width="350" :before-close="handleCloseUpdate">
        <el-form :model="categorySp" label-width="auto" style="max-width: 300px; min-height: 100px;">
            <el-form-item label="标题">
                <el-input v-model="categorySp.title"/>
            </el-form-item>
            <el-form-item label="简介">
                <el-input v-model="categorySp.introduce" />
            </el-form-item>
        </el-form>
        <div style="text-align: center; margin-top: 20px;">
            <el-button 
                type="primary"
                @click="onSubmitUpdateFirstCategory">
                {{ dialogTitle }}
            </el-button></div>
    </el-dialog>
    <!-- 删除数据 -->
    <el-dialog
    v-model="dialogVisibleDelete"
    title="Tips"
    width="500"
    :before-close="handleClose"
    >
        <span>此操作会删除该分类下所有数据，请谨慎操作！</span>
        <template #footer>
        <div class="dialog-footer">
            <el-button @click="dialogVisibleDelete = false">取消</el-button>
            <el-button type="primary" @click="confirmCategoryDelete">
            确认
            </el-button>
        </div>
        </template>
    </el-dialog>
</template>


<script setup>
import {ref, onBeforeMount} from 'vue';
import { ElMessage } from 'element-plus';
import { categoryApi, updateCategoryApi, deleteCategoryApi } from '@/requests';

const loading = ref(false);
const category = ref([]);
const categorySp = ref({
    id: null,
    title: null,
    introduce: null
});
const cid = ref();
const dialogVisibleUpdate = ref(false);
const dialogVisibleDelete = ref(false);
const dialogTitle = ref();

// 获取分类列表
const forCategory = async (cid) =>{
    loading.value = true;
    const res = await categoryApi({"id": cid.value});
    if (res.status === 2000){
        category.value = res.data;
    }else{
        ElMessage.error("获取列表失败")
    };
    loading.value = false;
}
// 在渲染之前加载接口
onBeforeMount(()=>{
    forCategory(cid);
})

// 打开更新分类对话框
const handleEdit = (index, row)=>{
    categorySp.value = row;
    if (categorySp.value.id){
        dialogTitle.value = "更新"
    }
    dialogVisibleUpdate.value = true;
}

// 提交编辑内容
const onSubmitUpdateFirstCategory = async()=>{
    const res = await updateCategoryApi(categorySp.value);
    if (res.status === 2000){
        dialogVisibleUpdate.value = false;
        categorySp.value.id = null;
        categorySp.value.title = null;
        categorySp.value.introduce = null;
        ElMessage.success("更新成功");
        forCategory(cid);
    }else{
        ElMessage.error(res.msg);
        forCategory(cid);
    }
}
// 编辑关闭之前
const handleCloseUpdate = ()=>{
    categorySp.value.id = null;
    categorySp.value.title = null;
    categorySp.value.introduce = null;
    dialogVisibleUpdate.value = false;
}
// 删除分类
const handleDelete = async(id)=>{
    cid.value = id;
    dialogVisibleDelete.value = true;
}
// 删除对话框关闭之前
const handleClose = async()=>{
    cid.value = null;
    dialogVisibleDelete.value = false
};
// 确定删除
const confirmCategoryDelete = async ()=>{
    const res = await deleteCategoryApi({"id": cid.value});
    if (res.status === 2000){
        cid.value = null;
        ElMessage.success("删除成功");
        dialogVisibleDelete.value = false;
        forCategory(cid);
    }else{
        ElMessage.error("删除失败")
    };
};
// 添加分类
const categoryAdd = ()=>{
    if (categorySp.value.id){
        dialogTitle.value = "更新"
    }else{
        dialogTitle.value = "添加"
    }
    dialogVisibleUpdate.value = true;
};
</script>